<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>表单自定义按钮</title>
<t:base type="jquery,easyui,tools,DatePicker,bootsprap,layer"></t:base>
</head>
<body style="overflow-y: hidden" scroll="no">
<t:formvalid formid="formobj" dialog="true" usePlugin="password" layout="table" action="cgformButtonController.do?save">
	<input id="id" name="id" type="hidden" value="${cgformButtonPage.id }">
	<input id="formId" name="formId" type="hidden" value="${cgformButtonPage.formId }">
	<table style="width: 600px;" class="formtable table table-striped table-hover table-condensed">
		<tr>
			<td align="right"><label class="Validform_label"> 按钮编码: </label></td>
			<td class="value"><input class="inputxt" id="buttonCode" name="buttonCode" ignore="ignore" value="${cgformButtonPage.buttonCode}"> <span class="Validform_checktip">编码不能是add/update/delete</span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 按钮名称: </label></td>
			<td class="value"><input class="inputxt" id="buttonName" name="buttonName" ignore="ignore" value="${cgformButtonPage.buttonName}"> <span class="Validform_checktip"></span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 按钮样式 </label></td>
			<td class="value"><select name="buttonStyle" id="buttonStyle">
				<option value="link" <c:if test="${cgformButtonPage.buttonStyle=='link'}">selected="selected"</c:if>>link</option>
				<option value="button" <c:if test="${cgformButtonPage.buttonStyle=='button'}">selected="selected"</c:if>>button</option>
			</select> <span class="Validform_checktip"></span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 动作类型 </label></td>
			<td class="value"><select name="optType" id="optType">
				<option value="js" <c:if test="${cgformButtonPage.optType=='js'}">selected="selected"</c:if>>js</option>
				<option value="action" <c:if test="${cgformButtonPage.optType=='action'}">selected="selected"</c:if>>action</option>
			</select> <span class="Validform_checktip"></span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 显示顺序 </label></td>
			<td class="value"><input class="inputxt" id="orderNum" name="orderNum" datatype="n" value="${cgformButtonPage.orderNum}"> <span class="Validform_checktip"></span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 显示图标样式 </label></td>
			<td class="value"><input class="inputxt" id="buttonIcon" name="buttonIcon" datatype="*"
				value="<c:if test="${cgformButtonPage.buttonIcon!=null&&cgformButtonPage.buttonIcon!=''}">${cgformButtonPage.buttonIcon}</c:if><c:if test="${cgformButtonPage.buttonIcon==null||cgformButtonPage.buttonIcon==''}">pictures</c:if>">
				<a href="#" onclick="chooseIconCode()">图标选择</a>
				<span class="Validform_checktip"></span>
			</td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 显示表达式 </label></td>
			<td class="value"><input class="inputxt" id="exp" name="exp" ignore="ignore" value="${cgformButtonPage.exp}"> <span class="Validform_checktip"></span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 所属区域</label></td>
			<td class="value"><input class="inputxt" id="containerId" name="containerId" ignore="ignore" value="${cgformButtonPage.containerId}"> <span class="Validform_checktip"></span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label">区域按钮排序</label></td>
			<td class="value"><input class="inputxt" id="sequence" name="sequence" ignore="ignore" value="${cgformButtonPage.sequence}"> <span class="Validform_checktip"></span></td>
		</tr>
		<tr>
			<td align="right"><label class="Validform_label"> 使用状态 </label></td>
			<td class="value"><select name="buttonStatus" id="buttonStatus">
				<option value="0" <c:if test="${cgformButtonPage.buttonStatus=='0'}">selected="selected"</c:if>>禁用</option>
				<option value="1" <c:if test="${cgformButtonPage.buttonStatus=='1'}">selected="selected"</c:if>>使用</option>
			</select> <span class="Validform_checktip"></span></td>
		</tr>
	</table>
</t:formvalid>
<div style="" id="chooseButtonIcons"></div>
<script type="text/javascript">
//sql增强
var layerId = null;

function getActive(obj) {
	jQuery("div[name='dialog_btn_icon']").each(function() {
		jQuery(this).removeClass("active");
	});
	jQuery(obj).addClass("active");
}

function getIcon(obj) {
	jQuery("div[name='dialog_btn_icon']").each(function() {
		jQuery(this).removeClass("active");
	});
	jQuery(obj).addClass("active")
	jQuery("#buttonIcon").val(jQuery(obj).attr("code") || "");
	layer.close(layerId);
}

function getIconVal() {
	jQuery("div[name='dialog_btn_icon']").each(function() {
		if (jQuery(this).hasClass("active"))
			jQuery("#buttonIcon").val(jQuery(this).attr("code"));
	});
	layer.close(layerId);
}

function closePanel() {
	layer.close(layerId);
}

function chooseIconCode(){
	var getData = jQuery("#chooseButtonIcons").data("chooseButtonIcons");
	if (!getData) 
		jQuery("#chooseButtonIcons").data("chooseButtonIcons", 
				(getData = EapTools.doAction("cgformButtonController.do?getButtonIcons", {}) || {}));
	var thisObj = jQuery("#buttonIcon");
	var dataList = getData.obj || [];
	var btnList = new Array();
	btnList.push("<div style='overflow-y:scroll;height:250px;margin:5px;'>");
	for (var i = 0; i < dataList.length; i++) {
		var thisBtn = dataList[i];
		btnList.push("<div name='dialog_btn_icon' ondblclick='getIcon(this)' onclick='getActive(this)' class='btn btn-default");
		if (thisObj.val() === thisBtn.btn_icon) {
			btnList.push(" active");
		}
		btnList.push("' style='margin-right:5px;margin-bottom:5px; float:left;'  code='"+ thisBtn.btn_icon +"'><i class='icon-" + thisBtn.btn_icon + "'></i>");
		btnList.push(thisBtn.btn_name + "</div>");
	}
	btnList.push("</div>");
	btnList.push("<hr style='margin:10px 0px;border-top: 2px solid #ccc;'>")
	btnList.push("<div class='pull-right' style='margin-right:10px;'>");
	btnList.push("<div class='btn btn-primary' onclick='getIconVal()' style='margin-right:20px;'><i class='icon-ok'></i>确定</div>");
	btnList.push("<div class='btn btn-default' onclick='closePanel()'><i class='icon-share-alt'></i>取消</div>");
	btnList.push("</div>");
	jQuery("#chooseButtonIcons").html("").append(btnList.join(""));
	layerId = jQuery.layer({
		type : 1,
		title : '选择按钮样式',
		shadeClose : true,
		maxmin : true,
		fix : false,
		area : [ 500, 350 ],
		page : {
			dom : '#chooseButtonIcons'
		}
	});
}
</script>
</body>
</html>